<script setup lang="ts">
import Header from '@/components/Header.vue'  //1.引入组件
import Footer from '@/components/Footer.vue'
import Count from '@/components/Count.vue'
import LoveTalk from '@/components/LoveTalk.vue'
import { RouterView, RouterLink } from 'vue-router' //路由视图(路由跳转)
import { ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
let news = ref({
  id: '1',
  title: '新闻'
})

import { useRouter } from 'vue-router' //编程式路由导航
const router = useRouter() //路由器
interface NewsInter {
  id: string
}
function showDetail(news: NewsInter) { //编程式路由导航
  //router.push('/news') //默认追加历史记录，router.replace()不可回退
  router.push({
    name: 'father',
    query: {
      id: news.id
    }
  })
}
</script>

<template>
  <!--2.使用组件(setup引入后使用,不需注册)-->
  <!-- <Header/> -->
  <!-- <Footer/> -->
  <Count/>
  <LoveTalk/>
  <!--导航区-->
  <RouterLink replace to="/fatherpath" active-class="gaoliang">路由跳转(到父组件)</RouterLink> <br />
  <!--字符串写法,编译成<a>标签,高亮样式自己写-->
  <RouterLink :to="{ path: '/unclepath' }" active-class="gaoliang">路由跳转(到叔组件,path方式)</RouterLink> <br /> <!--对象写法-->
  <RouterLink :to="{ name: 'uncle' }" active-class="gaoliang">路由跳转(到叔组件,name方式)</RouterLink> <br />
  <!-- <RouterLink :to="`/fatherpath?id=${news.id}&title=${news.title}`" active-class="gaoliang">1.路由query传参</RouterLink> -->
  <!-- <RouterLink :to="{path: '/fatherpath', query: {id: news.id}}" active-class="gaoliang">2.路由query传参(对象path)</RouterLink> <br/> -->
  <RouterLink :to="{ name: 'father', query: { id: news.id } }" active-class="gaoliang">3.路由query传参(对象name,命名路由)</RouterLink><br />
  <RouterLink :to="`/fatherpath/childpath/${news.id}/${news.title}`" active-class="gaoliang">1.路由params传参</RouterLink><br /> <!--嵌套路由2级不用写斜杠,params传参占位-->
  <RouterLink :to="{ name: 'child', params: { id: news.id, title: news.title } }" active-class="gaoliang">2.路由params传参(只能用name,且v不能是数组)</RouterLink> <br/>
  <button @click="showDetail(news)">编程式路由</button>
  <!--展示区-->
  <RouterView></RouterView> <!--路由视图-->

  <!-- <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p> -->
</template>

<style scoped></style>
